import React, { memo, useMemo } from "react";

function Son(props) {
  console.log("Son组件被调用了");

  // const salePrice = (() => {
  //   console.log("salePrice函数被调用了");
  //   return (props.price * 0.8).toFixed(2);
  // })();

  // useMemo：防止函数的无效调用。（有点像vue的计算属性）
  const salePrice = useMemo(() => {
    
    console.log("salePrice函数被调用了");
    return (props.price * 0.8).toFixed(2);

  },[props.price]);

  return (
    <div>
      <h1>子组件</h1>
      <p>商品数量：{props.num}</p>
      <p>原价：{props.price}</p>
      <p>折扣价：{salePrice}</p>
    </div>
  );
}

export default memo(Son);
